<template>
  <div>
    <main-layout>
      <div class="list-container">
      <auth-tag code="13002|13003" tips="无权访问">
        <vTable   ref="vGridTable"
              :columnsList="columnsList"
              addCode="7303"
              addText="新增账户"
              apiUrl="boss/boss-user/boss-user-list"
              :pageSize="15"
              :formConfig="formConfig"
              :toolbarConfig="false"
              :switchType="false"
              :queryData="{companyId:userStore.userInfo.companyId}"
              @saveClick="openAdd"
              @switchChange="switchChange">
              <template #actions="{row}">
                  <auth-tag code="13003">
                    <el-button type="text" class="btn-eidt" icon="edit" size="small" @click="goEdit(row)">编辑</el-button>
                  </auth-tag>
                </template>
          </vTable>
      </auth-tag>
      <add v-if="addFlag" v-model:show="addFlag" :title="editData.id?'编辑账户':'新增账户'" :edit-data="editData" @success="refreshTable" />
      </div>
    </main-layout>
  </div>
</template>

<script setup name="Account-List">
import { nextTick, ref, watch, onActivated, reactive, onMounted,computed} from 'vue'
import { useRouter } from 'vue-router'
import { editUser } from '@/api/system'
import mainLayout from '@/components/custom/mainLayout.vue'
import add from './components/add.vue'
import { useUserStore } from '@/pinia/modules/user'
import { getCompanyList } from '@/api/select'

const router = useRouter()

const userStore = useUserStore()

onMounted(async () => {
  roleList.value = await  getCompanyList({ page: 1, limit: 1000000,companyId:userStore.userInfo.companyId})
})
const roleList = ref([])
const vGridTable = ref(null)
const addFlag = ref(false)
const editData = ref({})

const  formConfig = computed(
    ()=>{
    return {
        titleWidth: 100,
        titleAlign: 'center',
        items: [
        {
            field: 'nick',
            title: '姓名',
            span: 5,
            itemRender: {name: '$input', props: {placeholder: '请输入姓名', clearable: true}}
          },
          {
            field: 'userName',
            title: '账号',
            span: 5,
            itemRender: {name: '$input', props: {placeholder: '请输入账号', clearable: true}}
          },
          {
            field: 'userRoleId',
            title: '角色',
            span: 5,
            itemRender: {
              name: '$select',
              props: {
                placeholder: '请选择',
                clearable: true,
                options:roleList
              }
            }
          },
          {
            field: 'isLocked',
            title: '状态',
            span: 5,
            itemRender: {
              name: '$select',
              props: {
                placeholder: '请选择',
                clearable: true,
                options:[{label:'启用',value:false},{label:'禁用',value:true}]
              }
            }
          },
          {
            field: 'dateRange',
            title: '创建时间',
            span: 5,
            slots: { default: 'dateRange' }
          },
          {
            field: '',
            title: '',
            span: 5,
            className:'from-right-btn-add',
            showTitle:false,
            slots: { default: 'addButtom' }
          },
          {
            align: 'center', collapseNode: false,
            itemRender: {
              name: '$buttons',
              children: [
                {props: {type: 'submit', icon: 'vxe-icon-search', content: '查询', status: 'primary'}},
                {props: {type: 'reset', icon: 'vxe-icon-refresh', content: '重置'},events: { click: (row,data)=>{
                  row.data.dateRange=[]
              }}}
              ]
            }
          }
        ]
    }
   })

const columnsList = ref([
      {type: 'seq', title: '序号',width:'60',align:'center'},
      {field: 'nick', title: '姓名',minWidth:'90',align:'center'},
      {field: 'userName', title: '账号',minWidth:'130',align:'center'},
      {field: 'roleName', title: '角色',minWidth:'110',align:'center'},
      {field: 'isLocked',minWidth:'110', title: '状态',align:'center',slots:{default:'status-switch'}},
      {field: 'companyName', title: '所属公司',minWidth:'130',align:'center'},
      {field: 'lastLoginIp', title: '登录IP',minWidth:'110',align:'center'},
      {field: 'lastLoginTime', title: '最近登录时间',minWidth:'110',align:'center'},
      {field: 'createTime', title: '创建时间',minWidth:'160',align:'center'},
      {title: '操作', width: 120,fixed:'right', slots: {default: 'actions'}}
   ])



const switchChange =async (row)=>{
  await editUser({id:row.id,isLocked:row.isLocked})
}

const refreshTable = () => {
  vGridTable.value.loadData()
}
const openAdd = () => {
  editData.value = {}
  addFlag.value = true
}
const goEdit = async(item) => {
  editData.value = JSON.parse(JSON.stringify(item))
  addFlag.value = true
}

</script>

<style lang="scss" scoped>
.inputLine {
  display: flex;
  width: 300px;
  .zhi{
    padding: 0 10px;
  }
  s{
    font-style: normal;
    text-decoration: none;
    padding: 0 0 0 5px;
    color: var(--el-text-color-regular);
  }
}
</style>
